<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*
       1. observe()方法
        - 监听某个节点属性的变化
            - 参数
                - 第一个  MutationRecord
                - 第二个  MutationObserver
     */

    // 1.1 基本使用
    let observer = new MutationObserver((mutations,mObserver) =>{
        console.log('MutationRecord',mutations)
        console.log('MutationObserver',mObserver)
        console.log('body元素上面的元素变化了')
    } )
    observer.observe(document.body, {
        attributes: true
    })
    setTimeout(() => {
        document.body.className = 'foo'
    }, 1000)
    console.log('changed body calss')

    
    /*
        3. disconnect()方法
            不仅会停止此后变化事件的回调，也会抛弃已经加入任务队列要异步执行的回调
     */
    // 5秒后,断开连接  ,断开后,可以继续observe
    setTimeout(() =>{
        observer.disconnect()
        console.log('断开连接后,没有监听到属性变化了')
        document.body.className = 'bar'
    },5000)
    
    
    
    
    
    
</script>
</body>
</html>